<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js错误捕获的方法</title>
</head>
<body>
    <!-- 
        js代码一旦报错，后面代码不会执行了。
        后面代码的逻辑可能涉及到页面展示需要的数据，就会影响到页面的展示。
        所以我们要做容错处理，例如某个属性某个值为空时，要有备选方案。
        并且要做错误捕获，在错误捕获的回调中做一些处理。
        我们还需要有错误监控系统，产品上线后，出现了bug，有监控系统告诉我们出了问题并且知道哪里出现问题。
     -->
</body>
<script>
    function fn1 () {
        try{
            new Promise((resolve,reject)=>{
                throw new Error('err')
                console.log('reject')
            })
        }catch(err){
            console.log(err)
        }
    }
    function fn2(){
        setTimeout(()=>{
            console.log('setTimeout')
        },0)
    }
    function fn3(){
        let img = new Image()
        img.onload=function(){
            console.log('img加载成功')
        }
        // img.onerror = function(){
        //     console.log('img加载失败')
        // }
        img.src="hhh"
    }

    window.onerror = function catchErr(err){
        console.log('window.onerror',err)
    }
    addEventListener('error', (err)=>{
        console.log('addEventListener-error',err)
    })
    addEventListener('unhandledrejection',(err)=>{
        console.log('unhandledrejection', err)
    })
    fn1()
    fn3()
    throw new Error('出错了')
    fn2()

</script>
</html>